<template>
  <a-page-header :title="$t('228')">
    <template #extra>
      <a-select
        v-model="state.modelId"
        :options="lstMyModel"
        style="width: 320px"
        :placeholder="$t('229')"
        @change="onModelChange"
      ></a-select>
      <a-button @click="refeshData" :title="$t('104')">{{
        $t("104")
      }}</a-button>
    </template>
  </a-page-header>
  <a-table
    :columns="cols"
    :data-source="lstActionLog"
    bordered
    :pagination="false"
    size="small"
  >
  </a-table>
  <a-flex justify="center" style="margin-top: 4px" v-if="state.hasMoreRecords">
    <a-button type="primary" @click="moreData">{{ $t("379") }}</a-button>
    &nbsp;&nbsp;
    <a-badge
      overflowCount="99999"
      :count="state.remainCount"
      :number-style="{ backgroundColor: '#52c41a' }"
      style="margin-top: 3px"
    />
  </a-flex>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const cols = [
  {
    title: t("230"),
    dataIndex: "logTs",
  },
  {
    title: t("231"),
    dataIndex: "log",
  },
];
const state = reactive({
  modelId: 0,
  pageIndex: 0,
  hasMoreRecords: false,
  lastIndex: 0,
  remainCount: 0,
});
const lstMyModel = reactive([]);
const lstActionLog = reactive([]);
const appStore = CommonDefine.appStore();

const refeshData = () => {
  lstActionLog.splice(0, lstActionLog.length);
  state.pageIndex = 1;
  _do_fetch();
};

const moreData = () => {
  state.pageIndex += 1;
  _do_fetch();
};

const loadModelList = () => {
  lstMyModel.splice(0, lstMyModel.length);
  appStore.allMyModels.forEach((x) => {
    let option = {
      value: x.model.id,
      label: x.model.name,
    };
    lstMyModel.push(option);
  });
};

const _do_fetch = () => {
  let pd = {
    pageIndex: state.pageIndex,
    pageSize: 10,
    lastIndex: state.lastIndex,
    modelId: state.modelId,
  };
  CommonDefine.apiPostArm("/api/v1/model/log", pd, (d) => {
    d.data.forEach((item) => {
      lstActionLog.push(item);
    });
    state.lastIndex = d.lastIndex;
    state.hasMoreRecords = d.lastIndex < d.allRecordCount;
    state.remainCount = d.allRecordCount - d.lastIndex;
  });
};

const onModelChange = (event) => {
  state.modelId = event;
};

onMounted(() => {
  loadModelList();
});
</script>
